<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>

<!--
      几个注意点：
        1.关于组件名：
            一个单词组成：
                以一种写法（首字母小写）：school
                以二种写法（首字母大写）：School
            多个单词组成：
                第一种写法（kabab-case命名）：my-school
                第一种写法（CamelCase命名）：MySchool
            备注：
                （1）.组件名尽可能回避HTML中已经有的元素名称，如 h2, H2都不行
                （2）.可以使用name配置项指定组件在开发者工具中呈现的名字

         2.关于组件标签：
            第一种写法:  <School></School>
            第二种写法:  <School/>
            备注：不只用脚手架的时候，<School/>会导致后续组件不能继续渲染

         3.一个简写方式：
            const school = Vue.extend(options)  可简写为： const school = options
-->

<body>
<!-- 准备好 一个容器-->
<div id="root">
    <h2>{{msg}}</h2>
    <School></School>
    <my-school></my-school>
</div>

</body>


<script type="text/javascript">

    Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

    const school = Vue.extend({
        template:'<div>' +
            '<h2>学校名称: {{name}}</h2>' +
            '<h2>学校地址: {{address}}</h2>' +
            '</div>',
        data(){
            return{
                name:'hfuu',
                address:'繁华大道'
            }
        }
    })

    Vue.component('School',school)

    //创建Vue实例
    new Vue({
        el: '#root',
        data:{
            msg:'欢迎学习Vue!'
        },
        components:{
            'my-school':school
        }
    })

</script>

</html>
